<script setup lang="ts">
import type { ID } from '#/api/common';
import type { SmsTemplateVO } from '#/api/config/template/sms/model';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message, Skeleton } from 'ant-design-vue';

import { smsTemplateInfo } from '#/api/config/template/sms';

const loading = ref(false);
const smsContent = ref<any>('');
const defaultTitle = '短信模板预览';
const defaultDesc = '';
const title = ref(defaultTitle);
const description = ref(defaultDesc);
const [BasicModal, modalApi] = useVbenModal({
  fullscreenButton: false,
  showConfirmButton: false,
  cancelText: '关闭',
  onClosed: handleClosed,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);

    const { id } = modalApi.getData() as { id?: ID };
    loading.value = true;
    if (id) {
      smsContent.value = await getSmsTemplateById(id);
    }
    loading.value = false;
    modalApi.modalLoading(false);
    if (!smsContent.value) {
      message.warning('查无短信内容');
      modalApi.close();
    }
  },
});

function handleClosed() {
  smsContent.value = '';
  title.value = defaultTitle;
  description.value = defaultDesc;
}

async function getSmsTemplateById(id: ID) {
  const smsTemplate: SmsTemplateVO = await smsTemplateInfo(id);
  title.value = `短信模板预览：${smsTemplate.smsName}`;
  return smsTemplate?.smsContent ?? '';
}
</script>

<template>
  <BasicModal :title="title" :description="description" class="w-[500px]">
    <!-- 页面背景仿 iOS 聊天页 -->
    <div class="min-h-[200px] bg-[#f2f2f7] p-4">
      <div class="mx-auto max-w-md space-y-3">
        <!-- 左侧：来信（灰色气泡） -->
        <!--<div class="flex items-end gap-2">-->
        <!--  <div-->
        <!--    class="relative max-w-[75%] rounded-2xl bg-gray-200 px-3 py-2 text-gray-900 shadow"-->
        <!--  >-->
        <!--    <p class="whitespace-pre-wrap leading-snug">-->
        <!--      你好，这是一条来自对方的消息。 换行也会正常显示。-->
        <!--    </p>-->
        <!--    &lt;!&ndash; 尾巴 &ndash;&gt;-->
        <!--    <span-->
        <!--      class="absolute -bottom-1 left-2 block h-3 w-3 rotate-45 bg-gray-200"-->
        <!--    ></span>-->
        <!--  </div>-->
        <!--</div>-->

        <!-- 再来一条右侧（带时间） -->
        <div class="flex justify-end">
          <div
            class="relative max-w-[75%] rounded-2xl bg-green-500 px-3 py-2 text-white shadow"
          >
            <p class="whitespace-pre-wrap leading-snug">
              {{ smsContent }}
            </p>
            <div class="mt-1 text-right text-[10px] text-white/70">
              已读 14:21
            </div>
            <span
              class="absolute -bottom-1 right-2 block h-3 w-3 rotate-45 bg-green-500"
            ></span>
          </div>
        </div>
      </div>
    </div>

    <Skeleton v-if="loading" active />
  </BasicModal>
</template>
